<template>
	<div class="header-select">
		<div class="headBar">
			<img src='~@/assets/img/bar/head.png' class="barLoge">
		</div>
		<a v-on:click="openList">
			<div class="headerName">
				<span class="headUser">{{userName}}同学</span>
				<span class="headUser">{{userNo}}</span>
			</div>
		</a>
		<div class="outBox">
			<a v-on:click="logout">
				<img src='~@/assets/img/bar/exit.png' class="exitLoge">
				<span class="Out">退出</span>
			</a>
		</div>
		</div>
</template>
<script>
export default {
	name: 'header-select',
	data() {
		return {
			userNo: window.localStorage.getItem('userNo'),
			userName: window.localStorage.getItem('userName'),
		};
	},
	methods: {
		openList() {
			this.$router.push('/StuInfo');
		},
		logout() {
      this.$confirm('您将退出登录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$message('成功退出登录', 'success');
        sessionStorage.clear();
        localStorage.clear();
        this.$router.push('/');
			}).catch(() => {
				this.$message('已取消退出', 'info');
			});
    },
	},
};
</script>
<style scoped>
a{
	cursor: pointer;
}
.header-select{
	/* float: left; */
  width: 8rem;
  height: .7rem;
  /* background-color: blueviolet; */
  display: flex;
  align-items: center;
	margin: -1.1rem 0 0 23rem;
}
.headBar{
	margin: .2rem;
	/* display: inline; */
	/* float: left; */
}
.exitLoge{
	margin: -.1rem 0 0 0;
  width: .6rem;
  height: .6rem;
  /* margin: -0.1rem .1rem 0 0; */
}
.headerName{
	width: 3.5rem;
	/* display: inline; */
}
.barLoge{
	width: .9rem;
	height: .9rem;
}
.headUser{
	font-size: .4rem;
	color: #66cccc;
	margin: .1rem 0 0 0;
}
.outBox{
	width: 2rem;
}
.Out{
	font-size: .4rem;
	color: #FAACA8;
}
</style>
